<!--
 * @Author: your name
 * @Date: 2021-03-31 16:41:05
 * @LastEditTime: 2021-04-21 16:15:31
 * @LastEditors: Please set LastEditors
 * @Description: 自定义标签
 * @FilePath: /medicine-web/src/components/CustomTag/index.vue
-->
<template>
  <div class="custom-tag-container">
    <span class="font-pattern-6 custom-tag__inner" :title="contentStr">{{contentStr}}</span>
    <img :src="require('@/assets/image/tag_close.png')" alt="" style="width: 14px; height: 14px; cursor: pointer;" @click.stop="handleClose">
  </div>
</template>
<script>
export default {
  name: 'customTag',
  props: {
    contentStr: {
      type: String,
      default: ''
    },
    contentType: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClose (e) {
      this.$emit('close', this.contentType)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.custom-tag-container {
  padding: 0px 9px;
  border: 1px solid #1ADBB6;
  border-radius: 4px;
  width: 160px;
  height: 30px;
  @include flex-def;
  @include flex-cCenter;
  .custom-tag__inner {
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
